<template>
  <div class="model-form">
    <section>
      <el-tabs v-model="activeName">
        <el-tab-pane label="通告分类树" name="third">
          <el-button type="primary" size="mini" @click="append()" style="margin-bottom:15px;">增加一级分类
          </el-button>
          <el-table :data="treeOptions.children" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
            <el-table-column prop="name" label="通告分类名称" sortable width="260" align="left">
            </el-table-column>
            <el-table-column prop="code" label="编码" width="120" sortable align="center">
            </el-table-column>
            <el-table-column prop="sortNum" label="排序号" width="120" sortable align="center">
            </el-table-column>
            <el-table-column prop="addDate" label="添加时间" width="160">
            </el-table-column>
            <el-table-column prop="demo" label="备注">
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
              <template #default="scope">
                <el-button type="primary" @click="append(scope.row)">增加
                </el-button>
                <el-button type="primary" @click="editData(scope.row)">编辑
                </el-button>
                <el-button type="danger" style="cursor: pointer;"
                           @click="deleteData(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="通告分类图" name="second">
          <vue2-org-tree class="tree-div" :data="treeOptions" :collapsable="collapsable"
                         :expandAll="expandAll" :horizontal="horizontal" :label-class-name="labelClassName"
                         :render-content="renderContent" @on-expand="onExpand" @on-node-click="onNodeClick"/>
        </el-tab-pane>
      </el-tabs>

      <el-dialog title="增加通告分类" v-model="showDialog" width="35%">
        <el-row :gutter="20">
          <el-col :span="18" :offset="2">
            <el-row class="input-line">
              <el-col :span="8">
                <span class="el-form-item__label title">上级通告分类：</span>
              </el-col>
              <el-col :span="16">
                <el-input disabled="true" size="small" v-model="form.parentName"></el-input>
              </el-col>
            </el-row>
            <el-row class="input-line">
              <el-col :span="8">
                <span class="el-form-item__label title">通告分类名称：</span>
              </el-col>
              <el-col :span="16">
                <el-input size="small" v-model="form.name"></el-input>
              </el-col>
            </el-row>
            <el-row class="input-line">
              <el-col :span="8">
                <span class="el-form-item__label title">编码：</span>
              </el-col>
              <el-col :span="16">
                <el-input size="small" v-model="form.code"></el-input>
              </el-col>
            </el-row>
            <el-row class="input-line">
              <el-col :span="8">
                <span class="el-form-item__label title">排序号：</span>
              </el-col>
              <el-col :span="16">
                <el-input-number size="small" v-model="form.sortNum"></el-input-number>
              </el-col>
            </el-row>

          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
					<el-button size="small" @click="showDialog = false">取 消</el-button>
					<el-button size="small" type="primary" @click="addTreeItem">确 定</el-button>
				</span>
      </el-dialog>
      <el-dialog title="编辑通告分类" v-model="editDialog" width="35%">
        <el-row :gutter="20">
          <el-col :span="18" :offset="2">
            <el-row class="input-line">
              <el-col :span="8">
                <span class="el-form-item__label title">通告分类名称：</span>
              </el-col>
              <el-col :span="16">
                <el-input size="small" v-model="form.name"></el-input>
              </el-col>
            </el-row>
            <el-row class="input-line">
              <el-col :span="8">
                <span class="el-form-item__label title">编码：</span>
              </el-col>
              <el-col :span="16">
                <el-input size="small" v-model="form.code"></el-input>
              </el-col>
            </el-row>
            <el-row class="input-line">
              <el-col :span="8">
                <span class="el-form-item__label title">排序号：</span>
              </el-col>
              <el-col :span="16">
                <el-input-number size="small" v-model="form.sortNum"></el-input-number>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
					<el-button size="small" @click="editDialog = false">取 消</el-button>
					<el-button size="small" type="primary" @click="editTreeItem">确 定</el-button>
				</span>
      </el-dialog>
      <el-dialog title="提示" v-model="dialogVisible" width="30%">
        <span>确认要删除该条数据吗?</span>
        <span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="handleClose">确 定</el-button>
				</span>
      </el-dialog>
      <!-- /.box -->
    </section>
  </div>
</template>

<script>
import common from "@/mixins/common.js";

function clone(Obj) {
  var buf;
  if (Obj instanceof Array) {
    buf = [];
    var i = Obj.length;
    while (i--) {
      buf[i] = clone(Obj[i]);
    }
    return buf;
  } else if (Obj instanceof Object) {
    buf = {};
    for (var k in Obj) {
      buf[k] = clone(Obj[k]);
    }
    return buf;
  } else {
    return Obj;
  }
}

function restObject(Obj) {
  var buf;
  if (Obj instanceof Array) {
    buf = [];
    var i = Obj.length;
    while (i--) {
      buf[i] = clone(Obj[i]);
    }
    return buf;
  } else if (Obj instanceof Object) {
    buf = {};
    for (var k in Obj) {
      buf[k] = restObject(Obj[k]);
    }
    return buf;
  } else {
    return "";
  }
}

var appConfig = {};
appConfig.methods = {};
appConfig.methods.getSearchList = function () {
  this.loading = true;
  var data = this.searchObject,
      that = this;
  data.fetch = 1;
  data.size = 500;
  data.sortMethod = "asc";
  data.sortField = "sortNum";
  this.postData("/tenantRest/topiccatalog/list.htm", data, function (result) {
    if (result.code == 0) {
      that.treeOptions.children = result.list;
      //that.treeOptions = result.list;
    }
    setTimeout(function () {
      that.loading = false;
    }, 300)
  });
}
appConfig.data = function () {
  return {
    searchObject: {
      no: 1,
      size: 10,
      name: '',
      fetch: 1,
      level: 1
    },
    dialogVisible: false,
    editDialog: false,
    defaultProps: {
      children: 'children',
      label: 'name'
    },
    loading: false,
    tableData: {},
    treeOptions: {
      id: -1,
      name: '通告分类结构',
      children: []
    },
    props: {
      label: 'name',
      children: 'children',
      expand: 'expand'
    },
    horizontal: true,
    collapsable: false,
    expandAll: false,
    labelClassName: 'bg-white',
    contextMenuVisible: false,
    contextMenuTarget: document.body,
    showDialog: false,
    form: {
      name: "",
      parent: "",
      sortNum: "",
    },
    activeName: "third"
  }
};
appConfig.mounted = function () {
  this.getSearchList();
}

appConfig.methods.renderContent = function (h, data) {
  return data.name;
};


appConfig.methods.onExpand = function (e, data) {
  if ('expand' in data) {
    data.expand = !data.expand
    if (!data.expand && data.children) {
      this.collapse(data.children)
    }
  } else {
    this.$set(data, 'expand', true)
  }
};
appConfig.methods.onNodeClick = function (e, data) {
  //$(".bg-white").removeClass('bg-white-curren');
  //$(e.target).addClass('bg-white-curren');
  this.parentId = data.id;
  this.departmentName = data.name;
};
appConfig.methods.collapse = function (list) {
  var _this = this
  list.forEach(function (child) {
    if (child.expand) {
      child.expand = false
    }
    child.children && _this.collapse(child.children)
  })
};
appConfig.methods.expandChange = function () {
  this.toggleExpand(this.departments, true)
};

appConfig.methods.showClick = function (event) {
  this.contextMenuVisible = false;
  console.log('deleteDatabaseOrTable', event);
};

appConfig.methods.handleNodeClick = function (data) {
}
appConfig.methods.append = function (data) {
  this.showDialog = true;
  this.form = restObject(this.form);
  this.form.parent = data.id;
  this.form.parentName = data.name;
  this.selectData = data;
}

appConfig.methods.remove = function (node, data) {
  console.log(event)
  this.selectId = data.id;
  this.dialogVisible = true;
  var parent = node.parent;
  this.selectData = parent.data.children || parent.data;
}
appConfig.methods.deleteData = function (data) {
  console.log(event)
  this.selectId = data.id;
  this.dialogVisible = true;
}
appConfig.methods.editData = function (data) {
  console.log(event)
  this.form = clone(data);
  this.form.children = "";
  this.editDialog = true;
}
appConfig.methods.editTreeItem = function (data) {
  var self = this,
      data = this.form;
  //delete data.linkCatalog;
  if (this.deforeUpdateData) {
    this.deforeUpdateData();
  }
  this.postData("/tenantRest/topiccatalog/update.htm", data, function (res) {
    if (res.code == 0) {
      self.$message({
        message: '修改数据成功',
        type: 'success'
      });
      //window.history.go(-1)
      self.editDialog = false;
      self.getSearchList();
    } else {
      self.$message.error(res.msg);
    }
  });
}

appConfig.methods.addTreeItem = function (data) {
  this.addData();
}
appConfig.methods.addData = function () {
  var self = this,
      data = this.form;
  if (this.deforeAddData) {
    this.deforeAddData();
  }
  if (this.parentId) {
    data.parent = this.parentId;
  }
  this.postData("/tenantRest/topiccatalog/create.htm", data, function (res) {
    self.showDialog = false;
    if (res.code == 0) {
      self.$message({
        message: '添加数据成功',
        type: 'success'
      });
      self.getSearchList();
    } else {
      self.$message.error(res.msg);
    }
  });
}
appConfig.methods.handleClose = function (done) {
  this.dialogVisible = false;
  var self = this;
  if (self.selectId) {
    var params = {};
    params.id = self.selectId;
    this.postData("/tenantRest/topiccatalog/delete.htm", params, function (res) {

      if (res.code == 0) {
        self.$message({
          message: '删除数据成功',
          type: 'success'
        });
        self.getSearchList();
        return;
        if (self.selectData) {
          const index = self.selectData.findIndex(d => d.id === self.selectId);
          self.selectData.splice(index, 1);
        } else {

        }
      } else {
        self.$message.error(res.msg);
      }
    });
  }

}

appConfig.mixins = [common];

export default appConfig;
</script>
<style scoped>
.bg-white {
  cursor: pointer;
}

.bg-white-curren {
  background-color: #409EFF;
  color: #fff;
}

.right-menu {
  border: 1px solid #eee;
  box-shadow: 0 .5em 1em 0 rgba(0, 0, 0, .1);
  border-radius: 1px;
}

.right-menu {
  position: fixed;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 3px;
  z-index: 999;
  display: none;
}

.right-menu a {
  padding: 2px;
}

.right-menu a {
  width: 75px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  display: block;
  color: #1a1a1a;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.tree-div {
  width: 100%;
}

.el-tabs {
  background-color: #fff;
  padding: 15px;
}

.input-line {
  margin: 5px 0px;
}

.input-line .title {
  line-height: 32px;
  float: right;
  font-size: 12px;
}
</style>